<template>
  <!--轮播图组件-->
  <div class="carousel">
    <ul :style="{transform: `translateX(${step}%)`}">
      <li v-for="(val,index) in imgUrl.imgUrl" :key="index">
          <img :src="`http://localhost:3000/${val}`" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "carousel",
  props: ["imgUrl"],
  data(){
      return{
          step:0
      }
  },
  methods:{
      move(){
          setInterval(()=>{
              if(this.step<=-67){
                  this.step=0
              }else{
                  this.step=this.step-33.5
              }
          },4000)
      }
  },
  mounted(){
      this.move()
  }
};
</script>

<style lang="less" scoped>
.carousel{
    width: 100%;
    box-sizing: border-box;
    margin: 1rem 0;
    background-color: #fff;
    overflow-x: hidden;
    ul{
        width: 300%;
        list-style: none;
        display: flex;
        transition: all 2s;
        li{
            flex:1;
            box-sizing: border-box;
            padding:0 1rem;
            img{
                width: 100%;
                height: 9rem;
            }
        }
    }
}
</style>